<template>
	<div class="Box">
		<div class="LoginBox">
			<h1>xx酒庄</h1>
			<div>
				<span>账号:</span>
				<el-input placeholder="请输入用户名" v-model="inword" style="width: 240px"></el-input>
			</div>
			<div>
				<span>密码:</span>
				<el-input v-model="inpwd" style="width: 240px" type="password" placeholder="请输入密码" show-password></el-input>
			</div>
			<el-button @click="login">登录</el-button>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import {userLogin} from "../api/wqj/index"
	import { ElMessage } from 'element-plus';
	import { useRouter } from 'vue-router';
	let router=useRouter()
	let inword=ref<string>("")
	let inpwd=ref<string>("")
	const login=async()=>{
		if(inword.value==''||inpwd.value==''){
			ElMessage.error('用户名和密码不能为空')
		}else{
			let res=await userLogin({
				adminAccount:inword.value,
				adminPassword:inpwd.value
			})
			if(res.length!=0){
				console.log("登录结果",res)
				ElMessage.success('登录成功')
				sessionStorage.setItem('Msg',JSON.stringify(res[0]))
				setTimeout(()=>{
					router.push('/userManage')
				},1000)
			}
			
		}
	}
</script>

<style scoped lang="less">
	.Box{
		width: 100%;
		height: 100vh;
		background: url(../assets/image/layerthree.jpg) no-repeat;
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.LoginBox{
			width: 40%;
			height: 55vh;
			background-color: rgba(255, 255, 255, 0.7);
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			align-items: center;
			div{
				height: 5vh;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				span{
					margin-right: 3%;
					font-size: 17px;
					font-weight: 600;
				}
			}
			.el-button{
				width: 20%;
				height: 6vh;
				border-radius: 50px;
				background-color: rgba(79, 28, 17, 0.8);
				opacity: 0.7;
				color: white;
				font-size: 20px;
				font-weight: 600;
			}
		}
	}
</style>